<template>
    <div class="main">
        <a-layout class="login">
            <a-layout-header class="layout-header">
                <img src="https://file.iviewui.com/admin-plus-dist/img/logo.fe4f63bf.png"
                    style="text-align:center; width:300px;" />
                <p>Admin Plus 企业级中后台前端解决方案</p>
            </a-layout-header>

            <a-layout-content class="layout-content" :style="{ minHeight: 'calc(100vh - 380px)' }">
                <a-form ref="formData" v-model="formData" :rules="ruleInline" inline>
                    <a-form-item name="UserName">
                        <a-input v-model:value="formData.UserName" placeholder="请输入用户名" size="large" class="btn">
                            <template #prefix>
                                <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="UserPwd">
                        <a-input-password v-model:value="formData.UserPwd" placeholder="请输入密码" size="large" class="btn">
                            <template #prefix>
                                <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item>
                        <a-checkbox v-model="single" size="large">自动登录</a-checkbox>
                        <a @click="fun_find_pwd()" style="float:right; margin-left:236px;">忘记密码</a>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" @click="fun_login()" size="large" class="btn">登 录</a-button>
                    </a-form-item>
                </a-form>
                <div>
                    <span>其它登录方式</span>
                    <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-wechat.c69ec08c.svg"
                        style="width:24px; margin-left:15px; vertical-align:middle;" />
                    <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-qq.2cf4276d.svg"
                        style="width: 24px; margin-left: 15px; vertical-align: middle;" />
                    <img src="https://file.iviewui.com/admin-plus-dist/img/icon-social-weibo.cbf658a0.svg"
                        style="width: 24px; margin-left: 15px; vertical-align: middle; " />
                    <a @click="fun_register()" style="float:right;">注册账户</a>
                </div>
            </a-layout-content>
            <a-layout-footer class="layout-footer">
                Copyright © 2022 View Design All Rights Reserved
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>

import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';

export default {
    components: {
        UserOutlined,
        LockOutlined,
    },
    data() {
        return {
            formData: {
                UserName: 'admin',
                UserPwd: '123456'
            },
            links: [
                {
                    key: '帮助',
                    title: '帮助',
                    href: 'https://www.iviewui.com',
                    blankTarget: true
                },
                {
                    key: 'github',
                    icon: 'logo-github',
                    href: 'https://github.com/view-design/ViewUIPlus',
                    blankTarget: true
                },
                {
                    key: '条款',
                    title: '条款',
                    href: '',
                    blankTarget: true
                }
            ],
            copyright: 'Copyright © 2022 View Design All Rights Reserved'
        }
    },
    methods: {
        show() {
            this.visible = true;
        },
        fun_find_pwd() {
            this.$Message["error"]("当前不支持密码找回,请联系管理员!");

        },
        fun_register() {
            this.$Message["error"]("当前不支持自行注册,请联系管理员!");
        },
        fun_login() {
            //this.$Message["success"]("登录成功,跳转首页!");
            var that = this;
            var url = "/Login/Login?userName=" + this.formData.UserName + "&pwd=" + this.formData.UserPwd;
            this.$http.post(url, {}, this, function (ret) {               
                localStorage.setItem("Token", ret.Data.token);
                localStorage.setItem("UserName1", ret.Data.user_show_name);
                localStorage.setItem("Userid", ret.Data.user_id);
                //that.$router.push("/");
                that.$router.push("/Desktop/Main");
            });
        }
    }
}
</script>


<style scoped>
body
{
    background: #F7F7F7;
}
.main
{
    width: 500px;
    margin: 0 auto;
}
.main .login
{
    background: #fff;
    width: 400px;
    margin: 0 auto;
}
.main .login .layout-header
{
    height: 240px;
    background: #fff;
    text-align: center;
    padding-top: 100px;
    color: #808695;
    font-size: 14px;
}
.main .login .layout-header p
{
    line-height: 0px;
}
.main .login .layout-content
{
    background: #fff;
}
.main .login .layout-footer
{
    height: 120px;
    background: #fff;
    width: 600px;
}
.main .login .btn
{
    width: 400px;
}
</style>
